<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import resize from '../../../dashboard/mixins/resize'

  export default {
    name: 'StatisticalChart',
    mixins: [resize],
    data() {
      return {
        chart: null
      }
    },
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '550px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true,
        default: {}
      }
    },
    watch: {
      chartData: {
        handler: function(newVal, oldVal) {
          this.setOptions(newVal)
        },
        deep: true
        // immediate: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.chartData)
      },
      setOptions({ salaryDateData = [], normalData = [], reissueData = [], sumSalaryData = [] }) {
        this.chart.setOption({
          backgroundColor: '#fff',
          'title': {
            'text': `工资统计`,
            'subtext': '',
            x: '4%',

            textStyle: {
              color: '#808080',
              fontSize: '22'
            },
            subtextStyle: {
              color: '#90979c',
              fontSize: '16',

            },
          },
          'tooltip': {
            'trigger': 'axis',
            'axisPointer': {
              'type': 'shadow',
              textStyle: {
                color: '#fff'
              }

            }
          },
          'grid': {
            'borderWidth': 0,
            'top': 110,
            'bottom': 95,
            textStyle: {
              color: '#fff'
            }
          },
          'legend': {
            x: '4%',
            top: '8%',
            textStyle: {
              color: '#90979c'
            },
            'data': ['月工资', '补发工资', '平均']
          },

          'calculable': true,
          'xAxis': [{
            'type': 'category',
            'axisLine': {
              lineStyle: {
                color: '#90979c'
              }
            },
            'splitLine': {
              'show': false
            },
            'axisTick': {
              'show': false
            },
            'splitArea': {
              'show': false
            },
            'axisLabel': {
              'interval': 0

            },
            'data': salaryDateData
          }],
          'yAxis': [{
            'type': 'value',
            'splitLine': {
              'show': false
            },
            'axisLine': {
              lineStyle: {
                color: '#90979c'
              }
            },
            'axisTick': {
              'show': false
            },
            'axisLabel': {
              'interval': 0

            },
            'splitArea': {
              'show': false
            }

          }],
          'dataZoom': [{
            'show': true,
            'height': 30,
            'xAxisIndex': [
              0
            ],
            bottom: 30,
            'start': 10,
            'end': 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'

            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'

          }, {
            'type': 'inside',
            'show': true,
            'height': 15,
            'start': 1,
            'end': 35
          }],
          'series': [{
            'name': '月工资',
            'type': 'bar',
            'stack': '总量',
            'barMaxWidth': 35,
            'barGap': '10%',
            'itemStyle': {
              'normal': {
                'color': '#F4A460',
                'label': {
                  'show': true,
                  'textStyle': {
                    'color': '#fff'
                  },
                  'position': 'inside',
                  formatter: function(p) {
                    return p.value > 0 ? (p.value) : ''
                  }
                }
              }
            },
            'data': normalData
          },

            {
              'name': '补发工资',
              'type': 'bar',
              'stack': '总量',
              'itemStyle': {
                'normal': {
                  'color': '#808080',
                  'barBorderRadius': 0,
                  'label': {
                    'show': true,
                    'position': 'inside',
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : ''
                    }
                  }
                }
              },
              'data': reissueData
            }, {
              'name': '总数',
              'type': 'line',
              symbolSize: 10,
              symbol: 'circle',
              'itemStyle': {
                'normal': {
                  'color': '#D3D3D3',
                  'barBorderRadius': 0,
                  'label': {
                    'show': true,
                    'position': 'top',
                    formatter: function(p) {
                      return p.value > 0 ? (p.value) : ''
                    }
                  }
                }
              },
              'data': sumSalaryData
            }
          ]
        })
      }
    }
  }
</script>
